<template>
  <el-container style="flex-direction:column;position: relative;">
    <el-card>
      <div slot="header">
        <div style="display:inline">
          <i class="el-icon-s-data" style="color: rgb(105, 192, 255);"></i>
          统计
        </div>
      </div>
      <div>
        <el-row :gutter="20" style="margin-bottom:20px;display:flex;">
          <el-col :span="6">
            <el-card
              style="height:100%;display:flex;flex-direction: column;"
              :body-style="{ flex: 1, display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }"
            >
              <div slot="header" style="display:flex;align-items:center;justify-content: space-between;">
                <div style="display:flex;align-items:center;">
                  <i class="el-icon-tickets" style="color: #13ce66;"></i>
                  <span style="font-size:12px;margin-left:6px;">订单数</span>
                </div>
                <el-tag type="success" style="float: right;" size="small">所有门店</el-tag>
              </div>
              <!-- <div style="font-size:30px;">{{dataDisplay.AllCount||0}}</div> -->
              <div style="font-size:30px;">
                <numberGrowWarp :value="dataDisplay.AllCount||0" color="#67c23a"></numberGrowWarp>
              </div>
            </el-card>
          </el-col>
          <el-col :span="18">
            <el-card class="details__card">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="details__card__content__item">
                    <div class="details__card__content__item__left">今天订单数</div>
                    <div class="details__card__content__item__right">{{dataDisplay.TodayCount||0}}单</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="details__card__content__item">
                    <div class="details__card__content__item__left">昨日订单数</div>
                    <div class="details__card__content__item__right">{{dataDisplay.YesterdayCount||0}}单</div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="details__card__content__item">
                    <div class="details__card__content__item__left">近七天订单数</div>
                    <div class="details__card__content__item__right">{{dataDisplay.RecentSevenDaysCount||0}}单</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="details__card__content__item">
                    <div class="details__card__content__item__left">本月订单数</div>
                    <div class="details__card__content__item__right">{{dataDisplay.InThisMonthCount||0}}单</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:20px;display:flex;">
          <el-col :span="6">
            <el-card
              style="height:100%;display:flex;flex-direction: column;"
              :body-style="{ flex: 1, display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }"
            >
              <div slot="header" style="display:flex;align-items:center;justify-content: space-between;">
                <div style="display:flex;align-items:center;">
                  <i class="el-icon-coin" style="color: rgb(255, 192, 105);"></i>
                  <span style="font-size:12px;margin-left:6px;">总金额</span>
                </div>
                <el-tag type="warning" style="float: right;" size="small">所有门店</el-tag>
              </div>
              <!-- <div style="font-size:30px;">{{dataDisplay.AllPrice||0}}</div> -->
              <div style="font-size:30px;">
                <numberGrowWarp :value="dataDisplay.AllPrice || 0"></numberGrowWarp>
              </div>
            </el-card>
          </el-col>
          <el-col :span="18">
            <el-card class="details__card">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="details__card__content__item">
                    <div class="details__card__content__item__left">今日成交额</div>
                    <div class="details__card__content__item__right">{{dataDisplay.TodayPrice||0}}元</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="details__card__content__item">
                    <div class="details__card__content__item__left">昨日成交额</div>
                    <div class="details__card__content__item__right">{{dataDisplay.YesterdayPrice||0}}元</div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="details__card__content__item">
                    <div class="details__card__content__item__left">近七天成交额</div>
                    <div class="details__card__content__item__right">{{dataDisplay.RecentSevenDaysPrice||0}}元</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="details__card__content__item">
                    <div class="details__card__content__item__left">本月成交额</div>
                    <div class="details__card__content__item__right">{{dataDisplay.InThisMonthPrice||0}}元</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:20px;display:flex;">
          <el-col :span="12">
            <div id="orderNumberChart" :style="{ width: '100%', height: '400px' }"></div>
          </el-col>
          <el-col :span="12">
            <div id="moneyChart" :style="{ width: '100%', height: '400px' }"></div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </el-container>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  TitleComponent,
  DataZoomComponent
} from 'echarts/components';
import { LineChart, PieChart } from 'echarts/charts';
import { UniversalTransition, LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout,
  TitleComponent,
  DataZoomComponent
]);


import { getDataDisplay } from '@/api/login.js'
import numberGrowWarp from './NumberGrowWarp'
export default {
  data() {
    return {
      tim: null,
      moneyChart: null,
      orderNumberChart: null,
      dataDisplay: {}
    }
  },
  components:{
    numberGrowWarp
  },
  mounted() {
    getDataDisplay().then((res) => {
      this.dataDisplay = res.data.data
      this.initMoneyChart(this.dataDisplay.moneyChartData);
      this.initNumberChart(this.dataDisplay.numberOfOrdersData);
      window.onresize = () => {
        clearTimeout(this.tim)
        this.tim = setTimeout(() => {
          this.moneyChart.resize()
          this.orderNumberChart.resize()
        }, 100)
      }
    })
  },
  methods: {
    initMoneyChart(data) {
      // 初始化echarts实例
      var myChart = echarts.init(document.getElementById("moneyChart"))
      this.moneyChart = myChart
      var option;
      setTimeout(() => {
        option = {
          color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
          title: {
            text: '本月成交额'
          },
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: data
          },
          xAxis: { type: 'category' },
          yAxis: [
            {
              name: '元',
              type: 'value',
            },
            { gridIndex: 0 }
          ],
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              start: 0,
              end: 100
            }
          ],
          grid: { top: '60%' },
          series: [
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '35%'],
              emphasis: {
                focus: 'self'
              },
              label: {
                formatter: '{b}: {@' + data[0][1] + '} ({d}%)'
              },
              encode: {
                itemName: data[0][0],
                value: data[0][1],
                tooltip: data[0][1]
              }
            }
          ]
        };
        myChart.on('updateAxisPointer', function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });
        myChart.setOption(option);
      });

      option && myChart.setOption(option);

    },
    initNumberChart(data) {
      // 初始化echarts实例
      var myChart = echarts.init(document.getElementById("orderNumberChart"))
      this.orderNumberChart = myChart
      var option;
      setTimeout(() => {
        option = {
          color: ['#FFBF00', '#FF0087', '#37A2FF', '#00DDFF','#80FFA5' ],
          title: {
            text: '本月订单数'
          },
          legend: {},
          tooltip: {
            trigger: 'axis'
          },
          dataset: {
            source: data
          },
          xAxis: { type: 'category' },
          yAxis: [
            {
              name: '单',
              type: 'value',
            },
            { gridIndex: 0 }
          ],
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              start: 0,
              end: 100
            }
          ],
          grid: { top: '60%' },
          series: [
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '35%'],
              emphasis: {
                focus: 'self'
              },
              label: {
                formatter: '{b}: {@' + data[0][1] + '} ({d}%)'
              },
              encode: {
                itemName: data[0][0],
                value: data[0][1],
                tooltip: data[0][1]
              }
            }
          ]
        };
        myChart.on('updateAxisPointer', function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });
        myChart.setOption(option);
      });
      option && myChart.setOption(option);

    },
  }
}
</script>

<style scoped lang="scss">
.details__card {
  &__content__item {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    &__left {
      flex: 1;
      font-size: 18px;
    }
    &__right {
      flex-basis: auto;
      font-size: 12px;
    }
  }
}
</style>